<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>单车私享</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<script src="jquery.min.js"></script>

	<!-- <link rel="stylesheet" href="./element/element.css"> -->
	<script type="text/javascript" src="vue.js"></script>
	<!-- <script type="text/javascript" src="./element/element.js"></script> -->
	<script type="text/javascript" src="request.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="./bike/cubeui.css" />
	<link rel="stylesheet" href="./bike/homepage.css" />
	<script src="./bike/cubeui.js"></script>
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
	<script src="./bike/spritespin.js" type="text/javascript"></script>

	<style>
		#homepage {
			background-color: #eee;
		}

		#homepage>.item {
			display: flex;
			padding: 2%;
			margin: 3%;
			background-color: #fff;
			border-radius: 7px;
		}

		.item .img {
			width: 120px;
		}

		.item .img img {

			width: 120px;
			height: 100px;
		}

		.item .content {
			width: 100%;
			font-size: 14px;
		}

		.item .content .end {
			align-items: flex-end;
		}

		.item .title {
			font-weight: bold;
		}

		.item .introduce {
			font-size: 12px;
			margin-top: 3%;
			color: #adacac;
			height: 65px;
			line-height: 1rem;
		}

		.item .price {
			width: 40%;
			color: #dd3c3c;
			font-family: fantasy;
			font-size: 20px;
			float: left;
			height: 1.5rem;
			line-height: 1.5rem;
		}

		.price span {
			font-size: 14px;
			margin-right: 4%;
		}

		.item .go-detail {
			width: 40%;
			float: right;
			border: 1px solid #dd3c3c;
			border-radius: 4px;
			text-align: center;
			color: #dd3c3c;
			height: 1.5rem;
			line-height: 1.5rem;
		}

		.cube-slide-dots>span.active {
			background: #dd3c3c;
		}

		.cube-slide-dots>span {
			display: inline-block;
			vertical-align: bottom;
			margin: 0 1px;
			width: 18px;
			height: 3px;
			border-radius: 10px;
			background: #ccc;
		}

		.type {
			text-align: center;
			position: fixed;
			bottom: 2%;
			width: 100%;
		}

		.type .type-item {
			line-height: 1.5rem;
			width: 4rem;
			height: 1.5rem;
			display: inline-block;
			text-align: center;
			background-color: #000;
			opacity: .6;
			color: #fff;
			border-radius: 10px;
			font-size: 14px;
			margin: 0px 1%;
		}
	</style>

</head>

<body>



	<div id="homepage">


		<div v-for="(item, index) in bike_list" class="item">
			<div class="img">
				<!-- <img :src="item.src" alt=""> -->

				<cube-slide width="50" :data="item.src_list" :loop="false" />
			</div>

			<div class="content">
				<div class="title">
					{{item.title}}
				</div>
				<div class="introduce">
					{{item.introduce}}
				</div>
				<div class="price">
					<span>¥</span>{{item.price}}
				</div>
				<div class="go-detail" @click="go_detail">
					详情
				</div>
			</div>
		</div>

		<div class="type">
			<div class="type-item" @click="show_type(1)">
				山地车
			</div>
			<div class="type-item" @click="show_type(2)">
				折叠车
			</div>
			<div class="type-item" @click="show_type(3)">
				公路车
			</div>
		</div>



	</div>


</body>


</html>
<script>


	bike = new Vue({
		el: "#homepage",
		data() {
			return {
				bike_list1: [{
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '都市精灵',
					introduce: '适合城市骑行，碳纤前叉转向轻盈',
					price: '2300',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '城市猎人青春版',
					introduce: '折叠轻便，出游通勤两不误',
					price: '2400',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '挑战者ex',
					introduce: '选用竞速级配件，助力都市骑行，让骑行更迅捷更专业',
					price: '2700',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '赤色幽灵',
					introduce: '选用特制公路越野胎，全路况模式长续航公路骑行和砂石路骑行两不误',
					price: '1900',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '赤色幽灵',
					introduce: '选用特制公路越野胎，全路况模式长续航公路骑行和砂石路骑行两不误',
					price: '1900',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '赤色幽灵',
					introduce: '选用特制公路越野胎，全路况模式长续航公路骑行和砂石路骑行两不误',
					price: '1900',
				}],

				bike_list2: [{
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '都市精灵',
					introduce: '适合城市骑行，碳纤前叉转向轻盈',
					price: '2300',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '城市猎人青春版',
					introduce: '折叠轻便，出游通勤两不误',
					price: '2400',
				}],

				bike_list3: [{
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '都市精灵',
					introduce: '适合城市骑行，碳纤前叉转向轻盈',
					price: '2300',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '城市猎人青春版',
					introduce: '折叠轻便，出游通勤两不误',
					price: '2400',
				}, {
					src_list: [{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
					},
					{
						url: '',
						image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
					}],
					title: '选用竞速级配件，助力都市骑行，让骑行更迅捷更专业',
					introduce: '300',
					price: '2700',
				}],

				bike_list: [],


				config_detail_list: [{
					name: '车架套装',
					value: '',
					price: '300',
				}, {
					name: '轮毂',
					value: '',
					price: '400',
				}, {
					name: '牙盘',
					value: '',
					price: '400',
				}, {
					name: '变速套装',
					value: '',
					price: '400',
				}, {
					name: '刹车',
					value: '',
					price: '300',
				}, {
					name: '坐垫',
					value: '',
					price: '300',
				}, {
					name: '脚踏',
					value: '',
					price: '300',
				}],
				total: '333',
				drawer: false,
				innerDrawer: false,
				parts_list: [],
				price: 2499,
				checked: true,
				selected: '男',
				options: ['男', '女'],

				selected1: '170cm-180cm',
				options1: ['170cm-180cm', '180cm-190cm', '190cm-200cm'],
				slider: 180
				//cur_time:(new Date()).toLocaleString()
			};
		},

		computed: {
			cur_time() {
				var d = new Date();
				return (d.getMonth() + 1) + '月' + d.getDate() + '日  ' + d.getHours() + ':' + d.getMinutes();
			}
		},
		mounted: function () {
			this.init();

		},

		methods: {
			init() {

				this.bike_list = this.bike_list1;

			},
			show_type(type) {
				//location.href = 'bike_detail.html';
				this.bike_list = this['bike_list'+type];
			},
			go_detail() {
				location.href = 'bike_detail.html';
			},
			handleClose(done) {
				this.$confirm('还有未保存的工作哦确定关闭吗？')
					.then(_ => {
						done();
					})
					.catch(_ => { });
			},

			toggel_section(item) {
				this.cur_section = item.name;
				this.setting_list = this.setting_data[item.name];

				this.$nextTick(function () {

				})

			},
			add_code(item) {
				this.code += $.trim($("#" + item.id).html().replace(/\#/, this.handler_value_name)) + "\n";

				this.$nextTick(function () {

				})

			},
			toggel_hot_use(item) {
				debugger;

				this.hot_use_list = item.hot.split(",");

			},
			assign_value(item) {
				this.handler_value_name = item;


			},
		}
	});



</script>